<template>
  <div class="content">
    <dc-header :page-to="'/membersShip'" :title="'成员详情'" :action-title="'保存'" @submit="_add()"></dc-header>
    <div class="content-body">
    <div class="head-top head-bottom">
      <div class="avatarbg">
        <img class="memavatar" :src="mDetail.photo?mDetail.photo:'static/icon-user-role.png'" alt="">
        <p>{{mDetail.fullname}}</p>
      </div>
      <dc-cell class="mt20" title="手机" :value="mDetail.mobile"></dc-cell>
      <div class="mt20" @click="showselect">
        <dc-cell title="角色" :value="selectedRole.name?selectedRole.name:mDetail.roleName" isLink></dc-cell>
      </div>
      <router-link :to="{path:'/jurisdictionShop', query:{phone: mDetail.mobile}}">
        <dc-cell title="门店权限范围" :value="mDetail.stores + '家'" isLink></dc-cell>
      </router-link>
      <mt-cell title="状态">
        <span><span class="tag-inactive light-red" v-if="mDetail.status==0">未激活</span>
          <span class="tag-inactive green" v-if="mDetail.status==1">已激活</span>
          <mt-button size="small" type="primary" v-if="mDetail.status==0" class="ml15"
                     @click="againInvite">再次邀请</mt-button>
        </span>
      </mt-cell>
      <div class="mt30 mr30 ml30">
        <mt-button type="danger" size="large" @click="_delete">删除成员</mt-button>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import api from '../../common/api/member';
  import mintUi from '../../common/mintUi';
  import cell from '@/common/plugins/cell';
  import store from '../../vuex/store';
  import {mapActions} from 'vuex';
  export default {
    data () {
      return {
        idRole: this.$route.query ? this.$route.query : {},
        mDetail: {},
        rolelist: [],
        selectedRole: {name: ''},
        storeCode: store.state.shopAlter.store.storeCode || store.state.shopAlter.store.groupCode
      };
    },
    components: {
      'dc-header': header,
      'dc-cell': cell
    },
    created () {
      api.getRoleList(this.storeCode)
        .then(res => {
          if (res.length > 0) {
            this.rolelist = res;
            this.rolelist.map((item, i) => {
              if (item.roleName === '管理员') {
                this.rolelist.splice(i, 1);
              }
            });
          }
        });
      this._getMemDetail();
    },
    methods: {
      ...mapActions({
        setSheetAction: 'setSheetAction',
        setSheetVisible: 'setSheetVisible'
      }),
      showselect () {
        let setSV = this.setSheetVisible;
        let self = this;
        this.setSheetAction(this.rolelist.map((item, i) => ({
          name: item.roleName,
          value: item.id,
          method: function (res) {
            setSV(false);
            self.selectedRole = res;
          }
        })));
      },
      _getMemDetail () {
        api.getRoleShip(this.storeCode).then(res => {
          if (res.length > 0) {
            res.map((ship, index) => {
              ship.members.map((item, i) => {
                if (item.id === this.idRole.id) {
                  this.mDetail = item;
                }
              });
            });
          }
        });
      },
      _add () {
        let data = {
          oldRoleId: this.mDetail.roleCode,
          newRoleId: this.selectedRole.value || this.mDetail.roleCode,
          mobile: this.mDetail.mobile
        };
        api.mdRoleGroup(data).then(res => {
          mintUi.openToast('修改成功');
          this.$router.push('/membersShip');
        });
      },
      _delete () {
        let data = {
          roleCode: this.mDetail.roleCode,
          mobile: this.mDetail.mobile,
          merchantCode: this.storeCode
        };
        mintUi.openConfirm('删除成员后，该成员将彻底退出并无法访问当前企业所有信息', '删除成员').then(res => {
          api.deleteMemDetail(data)
            .then(res => {
              mintUi.openToast('删除成功');
              this.$router.push('/membersShip');
            });
        });
      },
      againInvite () {
        let data = {
          roleName: this.mDetail.roleName,
          roleId: this.mDetail.roleCode,
          mobile: this.mDetail.mobile,
          fullName: this.mDetail.fullname,
          merchantCode: this.storeCode,
          userName: store.state.login.userInfo.username
        };
        api.memInvite(data).then(res => {
          mintUi.openToast('邀请成功');
          this.$router.push('/membersShip');
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import '../../assets/css/variable';

  .backscreen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: #ededed;
    z-index: -1;
  }

  .memavatar {
    width: px2rem(150px);
    border-radius: px2rem(70px);
  }

  .avatarbg {
    background: #fff;
    padding: px2rem(70px) 0 px2rem(70px) 0;
    p {
      margin-top: 0;
      font-size: px2rem(30px);
    }
  }
</style>


